<template>
  <view class="dy-scroll-container">
    <dy-navbar title="列表" />
    <scroll-view class="dy-scroll" scroll-y>
      <!-- 基础用法 -->
      <dy-card padding="32rpx 0">
        <template slot="body">
          <dy-list title="基础用法">
            <dy-list-item title="标题1" />
            <dy-list-item title="标题2" desc="描述文本1" />
            <dy-list-item title="标题3" desc="描述文本2" extra-text="额外文本" />
          </dy-list>
        </template>
      </dy-card>
      <!-- 隐藏右侧图标 -->
      <dy-card padding="32rpx 0">
        <template slot="body">
          <dy-list title="隐藏右侧图标" desc="show-right-icon: false">
            <dy-list-item
              v-for="item in ['宝马', '奔驰', '丰田', '本田']"
              :key="item"
              :show-right-icon="false"
            >
              {{ item }}
            </dy-list-item>
          </dy-list>
        </template>
      </dy-card>
      <!-- 禁用行 -->
      <dy-card padding="32rpx 0">
        <template slot="body">
          <dy-list title="禁用行">
            <dy-list-item v-for="item in 3" :key="item" disabled>{{ item }}. 不可点击</dy-list-item>
          </dy-list>
        </template>
      </dy-card>
      <!-- 左侧slot -->
      <dy-card padding="32rpx 0">
        <template slot="body">
          <dy-list title="左侧slot" desc="slot left">
            <dy-list-item title="标题标题" desc="描述">
              <dy-icon slot="left" name="commentfill" size="50" custom-class="dy-primary" />
            </dy-list-item>
            <dy-list-item title="是否开启版本更新提示" desc="更快更轻">
              <dy-icon slot="left" name="activity-fill" size="50" custom-class="dy-primary" dot />
              <dy-switch slot="right" size="40" active-color="#ff508a" />
            </dy-list-item>
            <dy-list-item title="点击更新" desc="更快更轻">
              <dy-icon slot="left" name="tasklist-fill" size="50" custom-class="dy-primary" dot />
              <dy-button slot="right" type="primary" size="tiny">更新</dy-button>
            </dy-list-item>
          </dy-list>
        </template>
      </dy-card>
      <!-- 右侧slot -->
      <dy-card padding="32rpx 0">
        <template slot="body">
          <dy-list title="右侧slot" desc="slot right">
            <dy-list-item title="中文">
              <dy-checkbox slot="right" active-mode="fill" shape="round" :value="true" />
            </dy-list-item>
            <dy-list-item title="英文">
              <dy-checkbox slot="right" active-mode="fill" shape="round" />
            </dy-list-item>
          </dy-list>
        </template>
      </dy-card>
      <!-- 示例 -->
      <dy-card padding="32rpx 0">
        <template slot="body">
          <dy-list title="示例">
            <dy-list-item title="订单记录">
              <dy-icon slot="left" name="order1" size="50" custom-class="dy-primary" />
            </dy-list-item>
            <dy-list-item title="我的">
              <dy-icon slot="left" name="mine" size="50" custom-class="dy-primary" />
            </dy-list-item>
            <dy-list-item title="个人信息">
              <dy-icon slot="left" name="form" size="50" custom-class="dy-primary" />
            </dy-list-item>
            <dy-list-item title="系统设置">
              <dy-icon slot="left" name="setup-fill" size="50" custom-class="dy-primary" />
            </dy-list-item>
          </dy-list>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'List'
}
</script>
